<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
 	String path = request.getContextPath();
 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 	request.setAttribute("path", path);
 	request.setAttribute("jsPath", path+"/js");
 	request.setAttribute("cssPath", path+"/css");
 	request.setAttribute("imagePath", path+"/image");
 %>

    
<!DOCTYPE html>
<html>
<head>
 <base href="<%=basePath%>">
<title>新增用户角色</title>
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
 
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css调用 -->
<link href="${cssPath }/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="${cssPath }/font-awesome.css?v=4.3.0" rel="stylesheet">

<!-- Morris -->
<link href="${cssPath }/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="${cssPath }/jquery.gritter.css" rel="stylesheet">
<link href="${cssPath }/animate.css" rel="stylesheet">
<link href="${cssPath }/style.css?v=2.2.0" rel="stylesheet">

<!-- 页面js调用部分 -->
<!-- Mainly scripts -->
	<script src="${jsPath }/jquery-2.1.1.min.js"></script>
	<script src="${jsPath }/bootstrap.min.js?v=3.4.0"></script>
	<script src="${jsPath }/jquery.metisMenu.js"></script>
	<script src="${jsPath }/jquery.slimscroll.min.js"></script>
	<script src="${jsPath }/hplus.js?v=2.2.0"></script>
	<script src="${jsPath }/pace.min.js"></script>
<style type="text/css">  
 
  	  table {
          margin:10px 0px 20px 10px;
          border-collapse:collapse;
      }
      thead {
          background:#CCCCCC;
          display:block
      }
      tbody {
          height:180px;
          overflow-y:scroll;
          display:block;
      }
   	.wt10{
   			height:30px;;
   			width:40px;
          	min-width:40px;
          	max-width:40px;
   		}
      .wt20{
          width:100px;
          min-width:100px;
          max-width:100px;
      }
      .wt30{
          width:150px;
          min-width:150px;
          max-width:150px;
      }
      .wt40{
          width:150px;
          min-width:150px;
          max-width:150px;
      }
      .wt50{
          width:150px;
          min-width:150px;
          max-width:150px;
      } 
      .wt60{
          width:150px;
          min-width:150px;
          max-width:150px;
      }

</style>  
</head>

<script src="${jsPath}/jquery.min.js"></script>
<script type="text/javascript">
	
	function search(){
		$("#pageNum").val(1);
		$('#userroleSearchForm').submit();
	}
	
	function goPage(pageNum){
		var toolPage=parseInt($("#toolPage").text());
		if(parseInt(pageNum)<=toolPage && parseInt(pageNum)>0){
			$("#pageNum").val(pageNum);
		}
		$('#userroleSearchForm').submit();
	}
	
	function addUserrole(){
		var roleId=[];
		$("input[name=roleId]:checked").each(function(){
			roleId.push($(this).val());
		});
		if(roleId.length<=0){
			return alert("请选择角色！");
		}
		var staffId=$("input[name=staffId]").val();
		
		var userroleForm = $("#userroleForm");
		var url=userroleForm.attr("action");
		var params ="staffId="+staffId+"&roleId="+roleId;
		//window.location.href
		$.post(url,params,function($data){
			console.info($data);
			var code = $data.code;
			var message = $data.message;
			if(code==1){
				//添加成功
				//做你想做的事情，提示成功，跳转页面
				alert("添加成功！");
				window.opener.search();
				window.close(); 
			}else{
				//错误处理，根据你的需求文档处理
				alert(message);
			}
		},"json");
	
	}

	function returnHref(){
		window.opener.search();
		window.close(); 
		
	}
	
	
	$(function(){
		$("input[name=allselect]").click(function(){
            if($(this).prop("checked")==true){
                $("input[name=roleId]").prop("checked","true");
            }else{
                $("input[name=roleId]").prop("checked","");
            }
        }) ;
	
		
	});
	
	
</script>


<body>
	<div id="wrapper">
		<!-- 左边导航 -->
		<%@ include file="../share/leftMenu.jsp" %>
				
		<div id="page-wrapper" class="gray-bg dashbard-1">
		<!-- 头部 -->
		<%@ include file="../share/head.jsp" %>
		
		
		
      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
         <!-- 正文开始 -->

<div class="box">
<h2>新增用户角色</h2>
	<div class="box_context">
		<c:if test="${message!=null}">
			<span style="color: red">${message}</span>
		</c:if>
		
		 <form action="${path }/admin/userrole/staffAdd" method="post" id="userroleForm">
		<label>用户名：</label>
      	<input type="text" value="${staffInfo.chnName}" readonly="readonly">
      	<input type="hidden" name="staffId" value="${staffInfo.staffId}"/>
      	<br/>
      	<br/>
      	<label>角色名：</label><input type="checkbox" name="allselect"/>全选<br/>
      	<c:forEach  var="sys" items="${sysroleList}" varStatus="status">
      		<c:if test="${status.index+1%5==0}">
				<br/>
      		</c:if>
      		<input type="checkbox" name="roleId" value="${sys.roleId}"><c:out value="${sys.name }"></c:out>
      	</c:forEach>
      	<br/>
      	<br/>
      	<input type="button" value="确认添加" onclick="addUserrole()"/>
      	<input type="button" value="返回" onclick="returnHref()"/>
      </form>
      
	</div>

</div>

<script>
	$(function(){
		$("input[type=checkbox]").each(function(){
			var roleId=$(this).val();

			<c:forEach  var="userrloe" items="${userroleList}">
				if("${userrloe.roleId}"==roleId){
					$(this).prop("checked","true");
				}
			</c:forEach>
		});
	});

</script>


</body>
</html>